<html>
    <head>
        <title>Test</title>
        <style>

input.plus {
  /* it will have this script class */
  prototype: EditPlus /*url(editplus.js)*/; 
}

input.plus menu.popup {
  color:#000;
  width:*;
  padding:10px;
  margin:8px 0;
  background:#fff;
  box-shadow:0px 0px 8px rgba(0,0,0,0.5);
  border-radius:1em;
}

input.plus menu.popup > div { border-top:1px solid #ccc; }

        </style>
        <script>

class EditPlus extends Element {
  
  ["on focus"]()  {
    this.pel = this.popup(<menu.popup>
          <li>A item</li>
          <li>B item</li>
          <li>C item</li>
          <li>D item</li>
          <div>other menus</div>
        </menu>);
  } 

  ["on focusout"]() {
    if(this.pel) {
      this.pel.state.popup = false; // hide it
      this.pel = null;
    }
  }

  ["on click at ol>li"](evt,li) {
    Window.this.modal(<info>Got click on {li}</info>);
    return true; // consume
  }
}
        </script>
    </head>
    <body>

    <input|text .plus placeholder="type some text" />
    <input|text />


    </body>
</html>